<template>
  <div>
    <nut-form
      label-position="top"
      ref="formData1Ref"
      :model-value="formData1"
      :rules="rules"
    >
      <nut-form-item :label="t('home_page_newPassword')" prop="new_password">
        <nut-input
          v-model="formData1.new_password"
          :placeholder="t('home_page_enterNewPassword')"
          :type="eyeOpen1 ? 'text' : 'password'"
        >
          <template #right>
            <iconpark-icon
              @click="eyeOpen1 = !eyeOpen1"
              color="#A8A8CA"
              :icon-id="eyeOpen1 ? 'show' : 'hide'"
              size="1.3rem"
              class="mr-12"
            ></iconpark-icon>
          </template>
        </nut-input>
      </nut-form-item>
      <nut-form-item
        :label="t('home_page_enterAgainNewPassword')"
        prop="new_password_confirm"
      >
        <nut-input
          v-model="formData1.new_password_confirm"
          :placeholder="t('home_page_enterAgainNewPassword')"
          :type="eyeOpen2 ? 'text' : 'password'"
        >
          <template #right>
            <iconpark-icon
              @click="eyeOpen2 = !eyeOpen2"
              color="#A8A8CA"
              :icon-id="eyeOpen2 ? 'show' : 'hide'"
              size="1.3rem"
              class="mr-12"
            ></iconpark-icon>
          </template>
        </nut-input>
      </nut-form-item>
    </nut-form>
    <div>
      <nut-button class="submit" @click="submit">{{ t("home_page_bind") }}</nut-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { verifyWithdraw } from "@/utils/validateTools";
import commonHooks from "../../commonHooks";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { WithdrawValidator, againWithdrawValidator } from "../../validator";
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
  type: {
    type: String,
    default: "",
  },
});
const eyeOpen1 = ref(false);
const eyeOpen2 = ref(false);
const formData1Ref = ref(null);
const formData1 = ref({
  new_password: "",
  new_password_confirm: "",
});
const { changewithdrawPassword } = commonHooks();

const rules = {
  new_password: [{ validator: WithdrawValidator }],
  new_password_confirm: [{ validator: againWithdrawValidator }],
};

// 发送
const submit = () => {
  formData1Ref.value?.validate().then(({ valid, errors }) => {
    if (valid) {
      const params = {
        step: 2,
        operate_type: props.type == "mobile" ? 3 : 4,
        ...formData1.value,
        ...props.formData,
      };

      changewithdrawPassword(params, 2, props.type);
    } else {
      console.warn("error:", errors);
    }
  });
};
</script>
